import React from 'react';
import { NavLink } from 'react-router-dom'
import { Carousel } from 'antd-mobile'
import './index.scss'
import axios from 'axios'

// import Details from '../../Details';


class Films extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      banner1: [
        {
          "bannerId": 1,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 2,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 3,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 4,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 5,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 6,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 7,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 8,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 9,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        },
        {
          "bannerId": 10,
          "imgUrl": "https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/"
        }
      ],
      banner: [
        {
          "bannerId":1,
          "imgUrl":"https://fuss10.elemecdn.com/1/be/6e8aa8e548c6d64ba1c50db538f98jpeg.jpeg?imageMogr/format/webp/thumbnail/568x/",
        },
        {
          "bannerId":2,
          "imgUrl":"https://fuss10.elemecdn.com/b/a5/959c88bd0f37e7e8e62a77d9e9e0ajpeg.jpeg?imageMogr/format/webp/thumbnail/568x/",
        },
        {
          "bannerId":3,
          "imgUrl":"https://fuss10.elemecdn.com/a/c2/b116ba7c679806963df62be93d320jpeg.jpeg?imageMogr/format/webp/thumbnail/568x/",
        },
        {
          "bannerId":4,
          "imgUrl":"https://fuss10.elemecdn.com/d/f5/456ea6285819f7932d8606bffeb35jpeg.jpeg?imageMogr/format/webp/thumbnail/568x/",
        },
        {
          "bannerId":5,
          "imgUrl":"https://fuss10.elemecdn.com/7/90/8012dcb83434050f0363316f24809jpeg.jpeg?imageMogr/format/webp/thumbnail/568x/",
        }
      ],
      store:[],
      siteName:localStorage.getItem("siteName")? localStorage.getItem("siteName"):'请选择地址' 
    }
  }

  hehe() {
    localStorage.clear()
  }

  componentWillMount() {

    // 获取商铺列表
    axios.get('http://localhost:3000/api/store/list').then(response => {
      let res = response.data
      console.log(res)
      if(res.code === 0) {
        // this.state.store = res.data.films  XXX 不能直接改变this.state
        this.setState({
          store:res.data.films
        })
      }
    })
  }

  render() {
    // 遍历商铺列表
    var list = this.state.store.map((item,i) => (
      <li key={i}>
        <div className="list-t">
          <img src="https://fuss10.elemecdn.com/7/d3/48a777a6b444dc317cc24d101220cjpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/" alt="" />
          <div className="list-t-r">
            <div className="list-t-name">
              <div>
                <span>{ item.restaurant.type === 0 ? "品牌":"" }</span>
                <h3>{ item.restaurant.name }</h3>
              </div>
              <span className="list-dian">···</span>
            </div>
            <div className="list-grade">
              <img src="" alt="" />
              <span className="list-nub">{ item.restaurant.rating }</span>
              <span>月售{ item.restaurant.recent_order_num }单</span>
            </div>
            <div className="list-evaluation">
              <span>￥{ item.restaurant.float_minimum_order_amount }起送 | { item.restaurant.piecewise_agent_fee.description }</span>
              <span>{ item.restaurant.distance/100 }km | { item.restaurant.order_lead_time }分钟</span>
            </div>
          </div>
        </div>
        <div className="list-b">
          <div className="list-b1">
            <span>{ item.restaurant.flavors[0].name }</span>
            <span>{ item.restaurant.flavors[1] && item.restaurant.flavors[1].name }</span>
            <img src="https://fuss10.elemecdn.com/a/c1/24c767ffa7fd296d3e2d6f01798c6png.png?imageMogr/format/webp/thumbnail/!20x20r/gravity/Center/crop/20x20/" alt="" />
            <p>{ item.restaurant.delivery_mode && item.restaurant.delivery_mode.text}</p>
          </div>
          <div className="list-b2">
            <div>
              <span>{ item.restaurant.activities[0].icon_name }</span>
              <p>{ item.restaurant.activities[0].tips }</p>
            </div>
            <div>
              <span>{ item.restaurant.activities[1] && item.restaurant.activities[1].icon_name }</span>
              <p>{ item.restaurant.activities[1] && item.restaurant.activities[1].tips }</p>
            </div>
          </div>
        </div>
      </li>
      ))
    return (

      <div className="films">
        {/* 地址 */}
        <div className="films-site">
          <NavLink to={'/site'} onClick={ this.hehe }>
            <i className=" iconfont icon-weizhi" ></i>
            <span>{ this.state.siteName }</span>
            <i className="iconfont icon-ln_jiantouxia"></i>
          </NavLink>
        </div>
        {/* 搜索 */}
        <div className="films-search">
          <div>
            <i className="iconfont icon-search"></i>
            <span>搜索饿了么商家、商品名称</span>
          </div>
        </div>
        {/* 分类 */}
        <Carousel dotStyle>
          <div className="films-sort">
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>美食</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/7/a9/77ff360f7d3fde2d459727ad09fcfjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>下午茶</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/c/7e/76a23eb90dada42528bc41499d6f8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>商超便利</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/0/d0/dd7c960f08cdc756b1d3ad54978fdjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>水果</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/7/0a/af108e256ebc9f02db599592ae655jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>医药健康</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>鲜花绿植</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/c/21/e42997b86b232161a5a16ab813ae8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>厨房生鲜</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/e/58/bceb19258e3264e64fb856722c3c1jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>跑腿代购</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>甜品饮品</span>
            </a>
            <a href="/">
              <img alt="" src="https://fuss10.elemecdn.com/5/de/bebe83947afee0b0f38257b0e3866jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" />
              <span>签到领红包</span>
            </a>
          </div>
        </Carousel>
        {/* 分类翻页 未完成 */}
        <div className="paging">
            <div className="active"></div>
            <div></div>
        </div>
        {/* 轮播图 */}
        <div className="films-banner">
          <div className="huiyuan">
            <div className="huiyuan-l">
              <img alt="" src="https://fuss10.elemecdn.com/8/0e/4dd212d831becab6e3ebd484c0941jpeg.jpeg?imageMogr/format/webp/thumbnail/34x/" />
              <h3>超级会员 ·</h3>
              <span>每月领20元红包</span>
            </div>
            <div className="huiyuan-r">
              <span>立即开通</span>
              <i className="iconfont icon-iconfonti"></i>
            </div>
          </div>
          <Carousel className="home-banner" autoplay={true} infinite dots={true}>
            {
              this.state.banner.map(item => (
                <img key={item.bannerId} src={item.imgUrl} alt="" />
              ))
            }
          </Carousel>
          <div className="zz"><a href="/">资质证照</a></div>
        </div>
        {/* 推荐商家 */}
        <div className="tuijian"><span>——</span>&ensp;&ensp;推荐商家&ensp;&ensp;<span>——</span></div>
        {/* 综合排序or距离最近or品牌联盟or... */}
        <ul className="screen">
            <li className="screen-active">
              <span>综合排序</span>
              <i className="iconfont icon-ln_jiantouxia"></i>
            </li>
            <li>
              <span>距离最近</span>
            </li>
            <li>
              <span>品牌联盟</span>
            </li>
            <li>
              <span>筛选</span>
              <i className="iconfont icon-shaixuan"></i>
            </li>
        </ul>
        {/* 商家列表 */}
        <ul className="films-list">
          {list}
        </ul>
         <NavLink to={ "/details" }>去详情页</NavLink>
      </div>

    )
  }
}

export default Films;
